<!-- 分类 -->
<template>
  <div class="classify">
     <!-- 分类创建比例最多16个 -->
    <div class="title">
      分类
    </div>
    <div class="content">
      <el-row :gutter="15">
        <el-col :md="{span:8}" :sm="{span:12}" v-for="(item,index) in classifyLis" :key="index" class="col">
          <nuxt-link to="/" class="content-item">
            <div class="name">{{ item.name }}</div>
            <p>总{{ item.count }}篇文章</p>
          </nuxt-link>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'classify',
    data(){
      return {
        classifyLis: [
          {
            id: '1',
            name: 'javascript',
            count: 36
          },
          {
            id: '2',
            name: 'typescript',
            count: 36
          },
          {
            id: '3',
            name: 'jquery',
            count: 36
          },
          {
            id: '4',
            name: 'vue.js',
            count: 36
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
.classify{
  @include panel;
  min-height: 100vh;
  .title{
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 30px;
  }
  .content{
    .col{
      &:nth-child(n){
        .content-item{
          color: rgba(238, 147, 159, 1.0);
          border-color: rgba(238, 147, 159, 1.0);
        }
      }
      &:nth-child(2n){
        .content-item{
          color: rgba(106, 50, 174, 0.5);
          border-color: rgba(106, 50, 174, 0.5);
        }
      }
      &:nth-child(3n){
        .content-item{
          color: rgba(41, 174, 119, 1.0);
          border-color: rgba(41, 174, 119, 1.0);
        }
      }
      &:nth-child(4n){
        .content-item{
          border-color: rgba(152, 174, 54, 1.0);
          color: rgba(152, 174, 54, 1.0);
        }
      }
      &:nth-child(5n){
        .content-item{
          border-color: rgba(174, 97, 33, 1.0);
          color: rgba(174, 97, 33, 1.0);
        }
      }
    }
    .content-item{
      height: 120px;
      width: 100%;
      display: block;
      border: 1px solid rgba(240,240,240,0.6);
      margin-top: 15px;
      border-radius: 10px;
      transition: box-shadow 0.25s;
      .name{
        font-size: 16px;
      }
    }
  }
}
</style>
